<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>苹果页面</title>
	<style type="text/css">
	*{padding: 0;margin: 0;}
	.nav_list{background:#aaa;
	          display: flex;
	          justify-content: center;
	          height: 50px;
	          
	          }
	.nav_list a{text-decoration: none;
		        line-height: 50px;
		        color: white;
		        display: block;
		        font-size: 25px;
		        

	}
	.pic{height: 500px;
	     background-repeat: no-repeat;
	     background-color: black;
	     background-position: center;}
	.box{ display: flex;
	      justify-content: space-between; }
	.box a{width: 200px;
      	  height: 200px;
      	  display:block;
          background-size: 100% 100%;
      	  border: 1px red solid;
      	  margin-top: 40px;}
	.box a:nth-child(1){background-image: url(./images/macbook_pro_performance_large.jpg);}
	  .box a:nth-child(2){background-image: url(./images/airpods_large.jpg);}
	  .box a:nth-child(3){background-image: url(./images/homepod_large.jpg);}
	  .box a:nth-child(4){background-image: url(./images/ipad_large.jpg);}
	


	@media screen and (min-width:800px){
	

	.nav_list a{width: 150px;
		        text-align: center;
		       }
	 .pic{
	 	  background-image:url(./images/iphone_xs_large.jpg);
	      }
	  .box{height: 600px;
	  	   width: 900px;

	       margin: 0 auto;
	       }
	   
	

	}
		
		@media screen and (max-width: 799px){

		.nav_list{ flex-direction: column;
		           position: absolute;
		           width: 100%;
		           height: 50px;}
		.nav_list:hover{height:300px;
			          align-items: center;
		}
		.nav_list a{ display: none; 
		             border-bottom:1px solid #ccc;}

		.nav_list:hover a { display:block;
			                  width:70%; }
		
		
		.pic{ background-image:url(./images/iphone_xs_small.jpg);}
        .box{flex-wrap: wrap;
             justify-content:space-around; }
       
		}
	

		
	</style>
	

</head>
<body>
	<nav class="nav_list">
		<a href="">Mac</a>
		<a href="">iPad</a>
		<a href="">iPhone</a>
		<a href="">Watch</a>
		<a href="">Music</a>
		<a href="">技术支持</a>
	</nav>
	<div class="pic">
		
	</div>
	<div class="box">
		<a href=""></a>
		<a href=""></a>
		<a href=""></a>
		<a href=""></a>
	</div>
	
</body>
</html>